<template>
  <div class="main" style="min-width: 1280px;">
    <div class="main-search-body">
      <div :style="{ width: '100%' }" style="border-radius: 10px;background-color: #ffffff">

        <p class="p-top" style="margin-left: 40px;">公司一览</p>
        <a-space direction="vertical" size="large" style="width: 100%;margin-right: 10px;" >
          <a-input-search @change="search"
                          :style="{width:'70%'}" style="height: 45px;margin-left: 15%;margin-bottom: 20px;"
                          v-model="searchParam.keyword" placeholder="请输入公司名称" allow-clear >
            <!--        输入框前缀-地图-->
            <template #prefix>
              <a-button type="primary" size="large" style="height: 100%;width: 100px;border-radius:10px 5px 0 10px;"><el-icon><LocationFilled /></el-icon>全国</a-button>
            </template>
          </a-input-search>
        </a-space>
        <span style="float: right;margin-right: 20px;position: relative;top: -50px;">
            <a-button type="primary" @click="clearSelect"
                      style="border-radius: 10px;padding: 10px;"
            >清空所有选项</a-button>
          </span>
        <a-divider />
        <div class="information">
          <span>城市：
            <a-radio-group default-value="0" v-model="searchParam.city">
                  <template v-for="item in city" :key="item">
                    <a-radio :value="item">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
          <br>
          <span class="hangye"><span style="display:inline-block;margin-bottom: 20px;">行业：</span>

            <a-radio-group default-value="0" v-model="searchParam.industryClassification">
                  <template v-for="item in type" :key="item">
                    <a-radio :value="item">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
        </div>

      </div>


      <div class="left-div" :style="{ width: '70%' }" style="display: inline-block;vertical-align: top; margin-top: 10px;">

        <a-row :gutter="20" :style="{ marginBottom: '20px' }">
          <a-col :span="8" v-for="item in items">
            <a-card @click="goToCompanyDetail(item.id)" :title="item.corporateName" :bordered="false" :style="{ width: '100%' }"
            style="box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.13);border-radius: 10px;margin-top: 20px;">
              <template #extra>
                <a-link>详情</a-link>
              </template>
              <div class="card-demo-right-img" style="display: inline-block;">
                <img :src="item.coverPhoto" style="width: 75px;height:75px;border: 1px solid rgba(112,112,112,0.29)">
              </div>
              <br>

              <p class="little-back"
                 style="position:absolute;display: inline-block;top: 65px;left:105px;font-size: 10px;">
                {{item.corporateLevel}}</p>
              <p class="little-back"
                 style="position:absolute;display: inline-block;top: 95px;left:105px;font-size: 10px;">
                {{ item.companySize }}</p>
              <p style="position:absolute;display: inline-block;
            bottom: 15px;left:115px;font-size: 14px;background-color: rgba(255, 255, 255, 0);">
                在招职位数：{{item.recruitmentNum}}</p>
            </a-card>
          </a-col>
        </a-row>

      </div>

      <div class="right-div" :style="{ width: '28%' }" style="display: inline-block;height: 500px;vertical-align: top;margin-left: 10px;">

        <!--        <div class="right-div-little">-->
        <!--          看过的职位-->
        <!--        </div>-->
        <div class="right-div-small">
          <img src="../../assets/img/Index/advertise.jpg" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB1.png" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB2.png" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB3.png" style="width: 300px">
        </div>
      </div>


    </div>
    <div style="margin:30px;margin-left: 400px;">
      <a-pagination @change="handleChange"
                    :total="total" :current="currentPage" :page-size="pageSize" show-total/>
    </div>
  </div>

</template>

<script setup>
import {useRouter} from 'vue-router'
import {onMounted, ref, watchEffect} from "vue";
import axios from "axios";
import qs from "qs";
import {message} from "ant-design-vue";
import {ElMessage} from "element-plus";

// 获取router实例
const router = useRouter();
const user = ref(getUser());
//
const items = ref([]);

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const pageSize = ref(15);
//定义变量保存数据总条目数
const total = ref();

const goToCompanyDetail = (id)=>{
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else{
    // 使用Vue Router进行页面跳转
    router.push({ path: 'CompanyDetail', query: { id:id } });
  }

}

// 清空所有选项的选择
const clearSelect = () => {
  searchParam.value.keyword = "";
  searchParam.value.city = "";
  searchParam.value.industryClassification = "";
}

// 查询的参数
const searchParam = ref(
    {
      keyword: "",
      city: "",
      industryClassification: ""
    }
)

// 从后端获取数据总条数
const getRecordCount = async () => {
  console.log(searchParam.value)
  let data = qs.stringify(searchParam.vale)
  const res = await axios.get('http://localhost:8080/v1/Csearch/selectRecordCount?' + data);
  if (res.data.code === 2000) {
    console.log("查询的条数为 == " + res.data.data)
    total.value = res.data.data;
  } else {
    message.error("加载失败" + res.data.msg)
  }
}

// 加载数据
const loadData = async () => {
  //定义变量保存分页器的当前页数 放入查询条件中
  searchParam.value.currentPage = currentPage.value;
  //定义变量保存分页器的每页显示多少条 放入查询条件中
  searchParam.value.pageSize = pageSize.value;
  let data = qs.stringify(searchParam.value)
  const res = await axios.get('http://localhost:8080/v1/Csearch/selectRecords?' + data);
  if (res.data.code === 2000) {
    console.log("查询的记录为 == " )
    console.log( res.data.data)
    items.value = res.data.data;
  } else {
    message.error("加载失败" + res.data.msg)
  }
}



// const city = ref([
//   {name: '深圳', value: '深圳市'},
//   {name: '成都', value: '成都'},
//   {name: '上海', value: '上海市'}
// ])

const city = ref([])
// 加载所需城市
const getAllCity =  () => {
  axios.get(BASE_URL + '/v1/Csearch/selectAllCity').then(res => {
    if (res.data.code === 2000){
      console.log(res.data.data)
      city.value = res.data.data;
    } else {
      message.error("加载失败" + res.data.msg)
    }
  })
}

// const type = ref([
//   {name: '互联网', value: '互联网'},
//   {name: '金融', value: '金融'},
//   {name: '餐饮', value: '餐饮'}
// ])
const type = ref([])
// 加载所有分类
const getAllType =  () => {
  axios.get(BASE_URL +  '/v1/Csearch/selectAllType').then(res => {
    if (res.data.code === 2000){
      console.log(res.data.data)
      type.value = res.data.data;
    } else {
      message.error("加载失败" + res.data.msg)
    }
  })
}



onMounted(() => {
  getAllCity();
  getAllType();
  loadData();
  getRecordCount();
})
/**
 * 监听searchParams 变量 改变时触发页面的重新加载
 */
watchEffect(() => {
  loadData();
});
//点击搜索
const search = () => {
  loadData();
  getRecordCount();
}


const handleChange = (page)=>{
  currentPage.value = page;
  loadData();
  getRecordCount();
}

</script>

<style scoped>
.hangye{

}

.little-back {
  padding: 4px;
}

p {
  /*强制文字不换行*/
  white-space: nowrap;
  /*超出的文字部分隐藏*/
  overflow: hidden;
  /*溢出文字部分替换为省略号*/
  text-overflow: ellipsis;
  background-color: rgba(217, 217, 217, 0.38);
}
.right-div-little-button{
  margin-top: 18px;
  width: 190px;
  border-radius: 10px;
}
.right-div-big {
  width: 100%;
  height: 170px;
  margin: 20px 7px;
  border-radius: 10px;
  overflow: hidden;
}

.right-div-small {
  width: 100%;
  height: 120px;
  margin: 20px 7px;
  border-radius: 10px;
  overflow: hidden;
}

.right-div-little {
  width: 100%;
  height: 120px;
  margin: 20px 7px;
  border-radius: 10px;
  text-align: center;
}

.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}



.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked  .custom-radio-card-mask{
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
.information {
  margin-top: 20px;
  margin-left: 40px;
  font-size: 15px;
}

.information>span {
  display: inline-block;
  margin-bottom: 10px;
}
.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 40px;
  margin-bottom: 15px;
}

/* 下拉内容（默认隐藏）*/
.dropdown-content {
  display: none;
  outline-style: none;
  border-radius: 10px;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: 14px;
  font-family: Microsoft YaHei;
}
/* 下拉列表中的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 更改悬停时下拉链接的颜色 */
.dropdown-content a:hover{
  background: linear-gradient(45deg, #a2827f, #855454);color: whitesmoke;border-radius: 11px;transform: scale(1.2); /* （120% 缩放 - 注意：如果缩放太大，它会超出视口） */
}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {display: block;margin-top: 1px;}


.choose-city {
  width: 100%;
  height: 35px;
  margin: 10px 40px 5px 40px;
}

.p-top {
  font-size: 18px;
  background-image: linear-gradient(to right, #7167ab, #5d4785);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  text-decoration: #6c4295;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  margin-top: 10px;
}

.p-top::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px; /* 下划线的高度 */
  background: linear-gradient(to right, #8f85c4, #7156a1); /* 颜色渐变 */
}

.card-demo-right {
  position: relative;
  display: inline-block;
  width: 35%;
  overflow: hidden;
  //background-color: #ababab;
  padding-left: 20px;
  margin-top: 10px;
}

* {
  margin: 0;
  padding: 0;
}

span {
  padding-right: 10px;
}
.main {
  background: linear-gradient(to top, #f3f3f3, #efefff);
  padding-top:15px ;
}

.main-search-body {
  width: 75%;
  margin: 0 auto;

}

.card-demo {
  margin-top: 25px;
  transition-property: all;
  border-radius: 10px;
  transition: 0.5s;
}
.card-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
}

.card-demo-title{
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to right, #cfcfe5, #f7f7fd);
  padding: 10px 25px;
}

.card-demo-title-big{
  display: inline-block;
  font-size: 17px;
  margin-right: 25px;
}


.card-demo-left{
  display: inline-block;
  width: 55%;
  position: relative;
  bottom: 15px;
  padding-left: 23px;
  margin-bottom: 10px;
}

.card-demo-content2{
  width: 90%;
}

.card-demo-title-detail{
  background-color: rgba(255, 255, 255, 0);
}

.card-demo-content p {
  display: inline-block;
  margin-bottom: 20px;
}

.card-demo-title-money{
  font-size: 18px;
  color: #001ead;
  margin-right: 20px;
  background-color: rgba(255, 255, 255, 0);
}

.card-demo-title-year{
  color: #3f3f3f;
  font-size: 12px;
  margin-right: 10px;
  padding: 4px;
}

.card-demo-title-school{
  color: #3f3f3f;
  font-size: 12px;
  padding: 4px;
}

.little-back{
  padding: 4px;
}

p {
  /*强制文字不换行*/
  white-space: nowrap;
  /*超出的文字部分隐藏*/
  overflow: hidden;
  /*溢出文字部分替换为省略号*/
  text-overflow: ellipsis;
  background-color: rgba(217, 217, 217, 0.38);
}

.arco-input-suffix {
  margin-left: 5px;
}
</style>
